import React, { Component } from 'react'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'
import './App.css'
export default class App extends Component {
  // 把多个组件都要用到的数据,定义在他们共同的父组件中.这个行为叫做状态提升
  state = {
    todos: [
      {
        id: 1,
        todoName: '吃饭',
        isDone: true,
      },
      {
        id: 2,
        todoName: '睡觉',
        isDone: true,
      },
      {
        id: 3,
        todoName: '学习',
        isDone: false,
      },
    ],
  }

  // app中定义的一个函数,将这个函数通过props传递给Header.在Header中调用这个函数,把要传递的数据,当做实参传递过来.这个函数通过形参接收
  addTodo = (todoName) => {
    // 根据任务名,创建任务对象
    const todo = {
      id: Date.now(),
      todoName,
      isDone: false,
    }
    // 往数组中添加新任务
    // this.state.todos.push(todo) 不建议这样写
    // 推荐写法: 根据旧数据,创建新数据
    const newTodos = [...this.state.todos]
    newTodos.push(todo)

    // 1. 修改todos的数据 2. 导致App中render函数重新执行
    // 注意: 父组件更新,默认会导致所有的子组件也更新
    this.setState({
      todos: newTodos,
    })
  }

  // 删除一个任务
  delTodo = (id) => {
    // 根据id,将todos里面的某个对象删除
    const newTodos = this.state.todos.filter((item) => item.id !== id)
    this.setState({
      todos: newTodos,
    })
  }

  // 修改一条任务的状态
  updateTodo = (id, isDone) => {
    const newTodos = this.state.todos.map((item) => {
      if (item.id === id) item.isDone = isDone
      return item
    })
    this.setState({
      todos: newTodos,
    })
  }

  render() {
    const { todos } = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo}></Header>
          <div>
            <List
              todos={todos}
              delTodo={this.delTodo}
              updateTodo={this.updateTodo}
            ></List>
            <Footer></Footer>
          </div>
        </div>
      </div>
    )
  }
}
